<template>
  <div class="property-tab">
    <div class="operation-bar">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="primary" :icon="Edit">编辑</el-button>
      <el-button type="primary" :icon="Delete">删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">日志</el-button>
      
      <div class="search-box">
        <span>属性名称</span>
        <el-input
          v-model="searchKeyword"
          placeholder="请输入属性名称"
          class="search-input"
        />
        <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="main-content">
<!--      <custom-table :data="tableData">-->
<!--        <template #operation="{ row }">-->
<!--          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>-->
<!--          <el-button type="primary" link @click="handleDelete(row)">删除</el-button>-->
<!--          <el-button type="primary" link>日志</el-button>-->
<!--        </template>-->
<!--      </custom-table>-->

      <!-- 分页 -->
      <div class="pagination">
        <span class="total-info">共 {{ pagination.total }} 条</span>
        <el-select v-model="pagination.pageSize" class="page-size-select">
          <el-option :value="10" label="10条/页" />
          <el-option :value="20" label="20条/页" />
          <el-option :value="50" label="50条/页" />
        </el-select>
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50]"
          layout="prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索关键词
const searchKeyword = ref('')

// 表格数据
const tableData = ref([
  {
    name: '商品A',
    code: 'BH0001',
    barcode: '6972829160057',
    owner: '货主A',
    category: '服装',
    brand: '阿迪达斯',
    unit: '个',
    tag: '标签1',
    status: '启用',
    batchManage: '是',
    composition: '是'
  },
  {
    name: '商品B',
    code: 'BH0002',
    barcode: '6972829160058',
    owner: '货主B',
    category: '服装',
    brand: '耐克',
    unit: '个',
    tag: '标签2',
    status: '启用',
    batchManage: '是',
    composition: '是'
  }
])

// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
}

// 操作按钮事件
const handleAdd = () => {
  ElMessage.success('点击了新增按钮')
}

const handleEdit = (row) => {
  ElMessage.success(`点击了编辑按钮，编辑的是：${row.name}`)
}

const handleDelete = (row) => {
  ElMessage.success(`点击了删除按钮，删除的是：${row.name}`)
}

// 分页配置
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100
})

// 分页事件处理
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  // 重新加载数据
}
</script>

<style scoped lang="scss">
.property-tab {
  .operation-bar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;

      .search-input {
        width: 200px;
      }
    }
  }

  .main-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 400px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    .total-info {
      color: #606266;
    }

    .page-size-select {
      width: 100px;
    }
  }
}
</style> 